<template>
    <div>
        <div class="navbar">
            <span class="navbar-text">{{title}}</span>
        </div>
        <div class="content">
            <div>
                <ul class="message-content">
                    <li v-for="(item,index) in showMsgDatas" :key="index">
                        <chat-item :chatItemObj='item'></chat-item>
                    </li>
                </ul>
            </div>
            <chat-feature :rightDatas = 'rightDatas'></chat-feature>
        </div>
    </div>
</template>
<script>
    import chatItem from '../components/chatItem.vue'
    import chatFeature from '../components/chatFeature'

    export default {
        data: function () {
            return {
                title: '',
                chatDatas: [],
                showMsgDatas: [],
                rightDatas:[]
            }
        },
        components: {
            chatItem,
            chatFeature
        },
        created() {
            this.loadChatData();
        },
        methods: {
            loadChatData() {
                axios.get("../../chatData.json")
                    .then((res) => {
                        console.log(res.data);
                        this.chatDatas = res.data.msgData;
                        this.setMsg('001');
                    })
            },
            setMsg(selectId) {
                this.selectMsg = this.chatDatas.filter((item) => {
                    return item.id === selectId;
                })[0];
                this.setShowMsgDatas(this.selectMsg.leftMsg, 'left');
                this.rightDatas = this.selectMsg.rightData;
            },
            setShowMsgDatas(msgData, type) {
                let i = 0;
                this.title = 'LGD_Sunday正在输入...';
                let interval = setInterval(() => {
                    console.log(i, msgData)
                    this.showMsgDatas.push({
                        id: this.selectMsg.id,
                        msg: msgData[i],
                        type: type
                    });
                    if (++i >= msgData.length) {
                        window.clearInterval(interval);
                        // return
                    }
                }, 1000)
            },
            onRightSelectMsg(item) {
                this.setShowMsgDatas(item.rightData,'right')
            },
        }
    }
</script>
<style>
    html {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    p {
        margin: 0px;
    }

    #app {
        height: 100%;
        width: 100%;
    }

    ul {
        margin: 0px;
        padding: 0px 0px 46px 0px;
    }

    li {
        padding: 6px 12px;
        list-style: none;
    }

    .navbar {
        height: 44px;
        display: flex;
    }

    .navbar-text {
        margin: 0 auto;
        line-height: 44px;
    }

    .content {
        position: absolute;
        overflow: hidden;
        top: 44px;
        bottom: 0;
        right: 0;
        left: 0;
        background: linear-gradient(to bottom, #57b1ff, #c0e2ff);
    }

    .message-content {
        position: absolute;
        top: 0;
        bottom: 45px;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .animated {
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
    }
</style>










